<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <div th:replace="header::common"></div>
    <style>
        .center {
            padding-left: 5px;
            padding-right: 5px;
            padding-top: 3px;
        }
        .pagination {
            display: inline-block;
            padding-left: 0px;
            margin: 0px 0px;
            border-radius: 4px;
        }
        .table {
            width: 100%;
            max-width: 100%;
            margin-bottom: 10px;
            margin-top: 3px;
         }
    </style>
</head>
<body class="center">
    <a class="btn btn-sm btn-primary" href="/blog/toAdd">添加</a>
    <a class="btn btn-sm btn-danger" onclick="deleteAll()">批量删除</a>
    <table class="table table-striped table-bordered table-hover table-condensed">
        <tr class="success">
            <td><input type="checkbox" id="checkAll"/></td>
            <td>ID</td>
            <td>标题</td>
            <td>分类</td>
            <td>分类名</td>
            <td>点击数量</td>
            <td>头像</td>
            <td>状态</td>
            <td>更新时间</td>
            <td>操作</td>
        </tr>
        <tr th:each="blogVO:${pageInfo.list}">
            <td><input type="checkbox" th:value="${blogVO.id}" class="cb"/></td>
            <td th:text="${blogVO.id}"></td>
            <td th:text="${blogVO.title}"></td>
            <td th:text="${blogVO.typeId}"></td>
            <td th:text="${blogVO.typeName}"></td>
            <td th:text="${blogVO.clickCount}"></td>
            <td><img width="40px" height="20px" th:src="|/pic/${blogVO.image}|"></td>
            <td>
                <span class="label label-warning" th:if="${blogVO.status==0}">禁用</span>
                <span class="label label-success" th:if="${blogVO.status==1}">正常</span>
            </td>
            <!--<td><a class="btn btn-danger" th:href="|/blog/deleteById?id=${blog.id}|">删除</a></td>-->
            <td th:text="${#dates.format(blogVO.gmtModified, 'yyyy-MM-dd hh:mm')}"></td>
            <td>
                <a class="btn btn-xs btn-success" th:onclick="showBlogContent([[${blogVO.content}]])">博客详情</a>
                <a class="btn btn-xs btn-danger" th:onclick="|deleteById(${blogVO.id})|">删除</a>
                <a class="btn btn-xs btn-primary" th:href="|/blog/toUpdate?id=${blogVO.id}|">编辑</a>
            </td>
        </tr>
    </table>
    <nav aria-label="Page navigation">
        <ul class="pagination pagination-sm">
            <!--上一页-->
            <th:block th:if="${pageInfo.pageNo==1}">
                <li class="disabled">
                    <a href="#" aria-label="Previous">
                        <span aria-hidden="true">上一页</span>
                    </a>
                </li>
            </th:block>
            <th:block th:if="${pageInfo.pageNo!=1}">
                <li>
                    <a th:href="|/blog/selectByPage?pageNo=${pageInfo.pageNo-1}|" aria-label="Previous">
                        <!--<span aria-hidden="true">&laquo;</span>-->
                        <span aria-hidden="true">上一页</span>
                    </a>
                </li>
            </th:block>

            <li th:if="${pageInfo.totalPage>=1}" th:class="${pageInfo.pageNo==page}?active:''" th:each="page:${#numbers.sequence(1, pageInfo.totalPage)}">
               <!--<a th:href="|${pageInfo.pageNo==page?'#':'/blog/selectByPage?pageNo=${page}'}|" th:text="${page}"></a>-->
                <th:block th:if="${pageInfo.pageNo==page}">
                    <a href="#" th:text="${page}"></a>
                </th:block>
                <th:block th:if="${pageInfo.pageNo!=page}">
                    <a th:href="|/blog/selectByPage?pageNo=${page}|" th:text="${page}"></a>
                </th:block>
            </li>

            <!--下一页-->
            <th:block th:if="${pageInfo.pageNo==pageInfo.totalPage}">
                <li class="disabled">
                    <a href="#" aria-label="Next">
                        <span aria-hidden="true">下一页</span>
                    </a>
                </li>
            </th:block>
            <th:block th:if="${pageInfo.pageNo!=pageInfo.totalPage}">
                <li>
                    <a th:href="|/blog/selectByPage?pageNo=${pageInfo.pageNo+1}|" aria-label="Next">
                       <!-- <span aria-hidden="true">&raquo;</span>-->
                        <span aria-hidden="true">下一页</span>
                    </a>
                </li>
            </th:block>
        </ul>
    </nav>

    <script>
        $(function (){//页面加载完了之后执行function里面代码
            $('#checkAll').click(function (){
                $('.cb').prop('checked', this.checked);
            });
        });

        function showBlogContent(content) {
            layer.open({
                type: 1,
                area: ['1000px', '450px'],
                content: content
            })
        }

        function deleteAll() {
            layer.confirm('您确认要删除么?', function() {
                let array = new Array();
                //$('.cb:checked')找到加了class="cb"而且是勾选状态的
                $('.cb:checked').each(function() {
                    //遍历每个勾选的checkbox，拿到里面的value值，放到array数组里面
                    array.push($(this).val());
                })
                console.log(array);
                if (array.length == 0) {
                    mylayer.errorMsg('至少要选择一个');
                    return;
                }
                location.href = '/blog/deleteAll?ids=' + array;
            });
        }

        function deleteById(id) {
            layer.confirm('您确认要删除么?', function() {
                location.href = '/blog/deleteById?id=' + id;
            });

            //在js里面单引号和双引号没有区别
            /*let isDelete = window.confirm('您确认要删除么?');
            if (isDelete) {
                location.href = '/blog/deleteById?id=' + id;
            }*/
        }
    </script>
</body>
</html>